<template>
  <div class="ring-content" ref="ring-content"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  props: {
    data: Object,
    name: Object,
    names: Object,
    text: String,
    left: String,
  },
  data() {
    return {};
  },
  mounted() {
    this.getChart();
  },
  methods: {
    getChart() {
      const el = this.$refs['ring-content'];
      const myChart = echarts.init(el);
      const option = {
        tooltip: {
          trigger: 'item',
        },
        legend: [
          {
            data: this.names,
            x: this.left,
            bottom: '5%',
          },
          {
            data: this.name,
            x: 'center',
            bottom: '14%',
          },
        ],
        graphic: [
          {
            // 环形图中间添加文字
            type: 'text', // 通过不同top值可以设置上下显示
            left: 'center',
            top: '38%',
            style: {
              text: this.text,
              textAlign: 'center',
              fill: '#333', // 文字的颜色
              fontSize: 18,
              fontWeight: 700,
              lineHeight: 16,
            },
          },
        ],
        color: ['#0080f8', '#16c676', '#fab60c', '#fe881b'],
        series: [
          {
            type: 'pie',
            radius: ['85%', '65%'],
            center: ['50%', '40%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 2,
            },
            label: {
              show: false,
              position: 'center',
            },
            labelLine: {
              show: false,
            },
            data: this.data,
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style scoped lang="scss">
.ring-content {
  width: 200px;
  height: 298px;
}
</style>
